<script setup >
import { ref, reactive } from "vue";
import {
  NButton,
  NModal,
  NCard,
  NForm,
  NFormItem,
  NInput,
  useMessage,
} from "naive-ui";
import { addAddress, editAddress } from "@/api/order";
let show = ref(false);
const emit = defineEmits(["commit"]);
const message = useMessage();

const formRef = ref(null);
const model = ref({
  receiver: null,
  contact: null,
  provinceCode: null,
  cityCode: null,
  countyCode: null,
  address: null,
  postalCode: "123456",
  addressTags: null,
  isDefault: 1,
  fullLocation: null,
});

defineExpose({
  open(address) {
    if (address.id) {
      for (const key in address) {
        model.value[key] = address[key];
      }
    } else {
      for (const key in model.value) {
        if (key === "isDefault") {
          model.value[key] = 1;
        } else {
          model.value[key] = null;
        }
      }
    }
    show.value = true;
  },
});
const rules = {
  receiver: [
    {
      required: true,
      validator(rule, value) {
        if (!value) {
          return new Error("请输入收货人");
        } else if (value.length > 16) {
          return new Error("收货人名称过长");
        }
        return true;
      },
      trigger: ["input", "blur"],
    },
  ],
  fullLocation: [
    {
      required: true,
      validator(rule, value) {
        if (!value) {
          return new Error("请选择地区");
        }
        return true;
      },
    },
  ],
  contact: [
    {
      required: true,
      validator(rule, value) {
        if (!value) {
          return new Error("请输入手机号");
        } else if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
          return new Error("请输入正确的手机号");
        }
        return true;
      },
      trigger: ["input", "blur"],
    },
  ],
};

const changeCity = (res) => {
  model.value.provinceCode = res.provinceCode;
  model.value.cityCode = res.cityCode;
  model.value.countyCode = res.countyCode;
  model.value.fullLocation = res.fullLocation;
};

const confirmAddress = (e) => {
  e.preventDefault();
  formRef.value?.validate((errors) => {
    if (!errors) {
      if (model.value.id) {
        editAddress(model.value).then(() => {
          message.success("修改收货地址成功");
          const valC = Object.assign(model.value, {});
          model.value = {};
          emit("commit", valC);
          show.value = false;
        });
      } else {
        addAddress(model.value).then((data) => {
          message.success("添加收货地址成功");
          const valC = Object.assign(model.value, {});
          valC.id = data.id;
          model.value = {};
          emit("commit", valC);
          show.value = false;
        });
      }
    }
  });
};
</script>

<template>
  <n-modal v-model:show="show">
    <n-card
      style="width: 600px"
      :title="`${model.id ? '修改' : '添加'}收货地址`"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <n-form ref="formRef" :model="model" :rules="rules">
        <n-form-item path="receiver" label="收货人">
          <n-input v-model:value="model.receiver" placeholder="请输入收货人" />
        </n-form-item>
        <n-form-item path="contact" label="手机号">
          <n-input v-model:value="model.contact" placeholder="请输入手机号" />
        </n-form-item>
        <n-form-item label="地区" path="fullLocation">
          <div class="city">
            <city
              :fullLocation="model.fullLocation"
              placeholder="请选择所在地区"
              @change="changeCity"
            ></city>
          </div>
        </n-form-item>
        <n-form-item label="详情地址:">
          <n-input v-model:value="model.address" placeholder="请输入详情地址" />
        </n-form-item>

        <n-form-item label="地址标签:">
          <n-input
            v-model:value="model.addressTags"
            placeholder="请输入地址标签"
          />
        </n-form-item>
      </n-form>
      <template #footer>
        <div class="modal-footer">
          <n-button
            type="primary"
            @click="confirmAddress"
            style="margin-right: 10px"
            >确认</n-button
          >
          <n-button @click="show = false">取消</n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<style scoped lang='less'>
.city {
  width: 100%;
  :deep(.select) {
    height: 35px;
    line-height: 35px;
    display: flex;
    padding: 0 10px;
    border-radius: 2px;
    justify-content: space-between;
    .placeholder {
      color: #ccc;
    }
    i {
      color: #ccc;
      font-size: 18px;
    }
    .value {
      font-size: 14px;
    }
  }
  :deep(.option) {
    top: 49px;
  }
}
</style>